<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    <button class="btn btn-info" (click)="AddProduct()">+Add
                       Product
                    </button>
                </header>
                <div class="panel-body">
                    <div class="adv-table">
                        <div class="row" id="table-margin">
                            <div class="col-sm-2">
                              <div class="dropdown" style="display: inline-block;">
                                  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                     Action
                                     <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                      <!-- <li><a href="javascript:void(0);" (click)="deleteSelectedData()">Delete</a></li> -->
                                      <li><a href="javascript:void(0);" (click)="confirmBox()">Delete</a></li>
                                     <!--  <li><a href="javascript:void(0);" (click)="deldeteAllData()">Delete All</a></li> -->
                                      <li><a href="javascript:void(0);" (click)="Modify()">modify condition and tags</a></li>
                                  </ul>
                              </div>
                            </div>
                            <div class="col-sm-2">
                                <select class="btn btn-info" (change)="tagsEvent($event.target.value)">
                                  <option selected>Select Tags</option>
                                  <option value="auto">auto</option>
                                  <option value="outdoor">outdoor</option>
                                </select>
                             </div>
                             <div class="col-sm-2">
                               <select class="btn btn-info" (change)="statusEvents($event.target.value)">
                                 <option *ngFor="let item of status" value="{{item.status}}">{{item.status}}</option>
                               </select>
                              </div>
                              <div class="col-sm-2">
                                <select class="btn btn-info" (change)="datesEvent($event.target.value)">
                                  <option selected>Add Date</option>
                                  <option value="All Date">All Date</option>
                                  <option value="Last Day">Last Day</option>
                                  <option value="Last Week">Last Week</option>
                                  <option value="Last Month">Last Month</option>
                                </select>
                              </div>
                  </div>
            <div style="height:10px;"></div>
            <table class="table table-bordered table-striped" id="example">
              <thead>
                  <tr>

                    <th class="text-center">
                            <input type="checkbox"  class="form-check-input pull-left" (change)="onAllChecked($event.target.checked)" >
                            <span class="pull-left">All</span>
                    </th>
                    <th class="text-center">

                      <span>Images</span>
                    </th>
                    <th class="text-center" (click)="sortedField('title')">Title</th>
                    <th class="text-center">Seller</th>
                    <th class="text-center">BSR</th>
                    <th class="text-center" (click)="sortedField('price')">
                      Price
                      <span class="glyphicon sort-icon" *ngIf="key =='date'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                    </th>
                    <th class="text-center" (click)="sortedField('status')">Status</th>
                    <th class="text-center">Condition</th>
                    <th class="text-center" (click)="sortedField('date')">
                      Add date
                      <span class="glyphicon sort-icon" *ngIf="key =='date'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                    </th>
                  </tr>
              </thead>
              <tbody>
                  <tr class="gradeX" *ngFor="let item of productList | orderBy: key: reverse | paginate: { id: 'server', itemsPerPage: pageCount, currentPage: p, totalItems: total }; let itemIdx = index">
                    <td class="text-center" style="width: 32px;">
                      <input type="checkbox"   class="pull-left form-check-input" [checked]="item.checked" (change)="onRowChecked($event, itemIdx)" >
                    </td>
                    <td class="text-center" style="width: 72px;">
                        <img src="{{item.imagesUlr}}" alt="amazon">
                      </td>

                      <td class="text-left"  style="height: 72px; width: 200px;">
                        <a [routerLink]="['/product-detail', item.asin]" target="_blank">
                          <strong>{{item.title.substring(-1, 60)}}</strong>
                        </a><br/>
                        <span class="asin-link">
                          <a href="https://www.amazon.com/dp/{{item.asin}}?psc=1" target="_blank">
                            <strong>{{item.asin}}</strong>
                          </a>
                        </span>
                      </td>
                      <td class="text-center" style="line-height: 72px; width: 120px;"><strong>{{item.seller}}</strong></td>
                      <td class="text-center" style="line-height: 72px; width: 120px;"><strong>{{item.BSR}}</strong></td>
                      <td class="text-center" style="line-height: 72px; width: 120px;"><strong>{{item.price}}</strong></td>
                      <td class="text-center" style="line-height: 72px; width: 180px;"><strong>{{item.status}}</strong></td>
                      <td class="text-center" style="width: 260px;">
                        <app-expression [condition]=item.conditions></app-expression>
                      </td>
                      <td class="text-center" style="line-height: 72px; width: 120px;">{{item.date}}</td>
                  </tr>
              </tbody>
              <tfoot>
                  <tr>
                    <th class="text-center"></th>
                    <th class="text-center">Images</th>
                    <th class="text-center">Title</th>
                    <th class="text-center">Seller</th>
                    <th class="text-center">BSR</th>
                    <th class="text-center">Price</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Condition</th>
                    <th class="text-center">Add date</th>
                  </tr>
              </tfoot>
            </table>
          </div>
          <div class="has-text-centered">
            <!-- <div class="spinner" [ngClass]="{ 'hidden': !loading }"></div> -->
            <pagination-controls (pageChange)="getPagePro($event)" id="server"></pagination-controls>
          </div>
        </div>
      </section>
    </div>
    </div>
</section>
